<template>
  <view class="index-my-wallet">
    <view class="wallet-banner">
      <image :src="bannerImg" class="banner-img" mode="aspectFit" />
      <view class="banner-content">
        <view class="top">
          <u-cell center :border="false">
            <image slot="icon" :src="crashIcon" class="top-img" />
            <text slot="title" class="top-title">{{$t('mine.keTiXyE')}}</text>
          </u-cell>
        </view>
        <view class="middle">
          <view class="middle-left">¥{{ mountMoney }}</view>
          <view class="middle-right" @click="toWithdrawal"></view>
        </view>
        <view class="bottom">
          <u-grid :border="true" col="2">
            <u-grid-item customStyle="color:#fff;font-size:14px;">
              {{$t('wallet.jinRiLjSy')}}：¥{{ todayMoney }}
            </u-grid-item>
            <u-grid-item customStyle="color:#fff;font-size:14px;">
              {{$t('wallet.zuoRiLjSy')}}：¥{{ yestMoney }}
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>

    <view class="title">
      <view class="title-left">{{$t('wallet.shouZhiMx')}}</view>
      <view class="title-right">
        <view class="tab">
          <view class="tab-item">
            <picker @change="memberPickerChange" :value="defaultIndex" :range="memTypeList" range-key="name">
              <view class="picker">
                {{memTypeList[defaultIndex] && memTypeList[defaultIndex].name || $t('wallet.xuanZeLx')}}<u-icon name="arrow-down-fill" color="#ccc" size="14" />
              </view>
            </picker>
          </view>
          <view class="tab-item">
            <picker mode="date" :value="date" @change="dateChange">
              <view class="picker">
                {{date}}<u-icon name="arrow-down-fill" color="#ccc" size="14" />
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>

    <view class="list">
      <view class="list-item" v-for="item in waretList" :key="item.id">
        <view class="icon">
          <image :src="item.url" class="icon-img" />
        </view>
        <view class="item-middle">
          <view class="h-title">{{ item.type == 1 ? $t('wallet.yongJinJs'):$t('wallet.yuEtX') }}</view>
          <view>{{ item.updateTime }}</view>
        </view>
        <view class="item-right">
          <view class="h-title">{{ item.withdrawAmountStr }}</view>
          <view>{{$t('wallet.yuE')}}：￥{{ item.balanceStr }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      bannerImg: "",
      crashIcon: "",
      todayMoney: 0,
      yestMoney: 0,
      money: 0,
      mountMoney: 0,
      defaultIndex: null,
      pageNum: 1,
      pageSize: 10,
      waretList: [],
      date: this.$t("member.daoQiRq"),
      memTypeList: [
        {
          code: "1",
          name: this.$t("wallet.yongJinJs"),
        },
        {
          code: "2",
          name: this.$t("wallet.yuEtX"),
        },
      ],
      totalCount: 0,
    };
  },
  onLoad() {
    console.log(this.$t("wallet.xuanZeLx"));
    this.bannerImg = this.imgPath + "/images/mine_banner_bg.png";
    this.crashIcon = this.imgPath + "/images/icon/crash.png";
    this.getUserInfo();
    this.getWalletList();
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("page.woDeQb"),
    });
  },
  onReachBottom() {
    //上拉到底时触发，onReachBottom函数跟生命周期同级
    if (this.waretList.length < this.totalCount) {
      this.pageNum++; //当前条数小于总条数 则增加请求页数
      this.getWalletList(); //调用加载数据方法
    } else {
      uni.$u.toast(this.$t("index.yiJiaZaiQb"));
    }
  },
  methods: {
    async getUserInfo() {
      const res = await this.$api.getPersonalInformation({});
      if (res.code === 0) {
        this.money = res.data.money;
        this.todayMoney = res.data.todayMoney;
        this.yestMoney = res.data.yestMoney;
        this.mountMoney = res.data.mountMoney || 0;
      }
    },
    async getWalletList() {
      const params = {
        endTime: this.date === "到期日期" ? "" : this.date,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.memTypeList[this.defaultIndex]?.code || "",
      };
      const res = await this.$api.userPackList(params);
      if (res.code === 0) {
        this.waretList = [...res.data.list, ...this.waretList];
        this.totalCount = res.data.totalCount;
      } else {
        this.waretList = [];
        this.totalCount = 0;
      }
    },
    toWithdrawal() {
      uni.navigateTo({ url: "/pages/withdrawal/withdrawal" });
    },
    memberPickerChange(e) {
      this.defaultIndex = e.detail.value;
      this.waretList = [];
      this.getWalletList();
    },
    dateChange(e) {
      this.date = e.detail.value;
      this.waretList = [];
      this.getWalletList();
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6 !important;
}
</style>
<style lang="scss" scoped>
.index-my-wallet {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
  padding-bottom: 40px;
  .wallet-banner {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    .banner-img {
      width: 100%;
      height: 150px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
    }
    .banner-content {
      width: calc(100% - 60px);
      margin: 0 auto;
      overflow: hidden;
      height: 150px;
      position: absolute;
      z-index: 1;
      left: 30px;
      top: 0;
      /deep/ .u-cell__title-text {
        color: #fff;
      }
      .top {
        height: 40px;
        margin-top: 10px;
      }
      .top-img {
        width: 24px;
        height: 24px;
      }
      .top-title {
        color: #fff;
      }
      .middle {
        height: 40px;
        margin-top: 10px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        padding: 0 0 0 20px;
        .middle-left {
          font-size: 20px;
          color: #fff;
        }
        .middle-right {
          width: 100px;
        }
      }
      .bottom {
        padding-top: 10px;
      }
    }
  }
  .title {
    height: 30px;
    display: flex;
    width: calc(100% - 40px);
    margin: 20px auto 0;
    overflow: hidden;
    justify-content: space-between;
    .title-left {
      color: #333;
      font-weight: bold;
      border-left: 5px solid #75cecc;
      padding-left: 20px;
      height: 30px;
      line-height: 30px;
    }
    .title-right {
      flex: 1;
      .tab {
        height: 30px;
        display: flex;
        justify-content: flex-end;
        .tab-item {
          overflow: hidden;
          display: flex;
          justify-content: center;
          font-size: 14px;
          margin-left: 15px;
          background-color: #fff;
          padding: 5px 10px;
          border-radius: 15px;
          .picker {
            display: flex;
          }
        }
      }
    }
  }
  .list {
    margin: 0 auto;
    overflow: hidden;
    width: calc(100% - 40px);
    .list-item {
      height: 80px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0px 2px 5px#f2eded;
      display: flex;
      align-items: center;
      padding: 0 15px;
      margin-top: 20px;
      .icon {
        width: 30px;
        .icon-img {
          width: 30px;
          height: 30px;
        }
      }
      .h-title {
        font-weight: bold;
        color: #333;
        padding-bottom: 5px;
      }
      .item-middle {
        font-size: 14px;
        color: #999;
        padding-left: 15px;
      }
      .item-right {
        flex: 1;
        text-align: right;
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>
